<template>
  <div class="full-div">
    <v-map :zoom=10 :center="initialLocation">
      <v-icondefault></v-icondefault>
      <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
      <v-marker-cluster :options="clusterOptions" @clusterclick="click()">
        <v-marker v-for="l in locations" :key="l.id" :lat-lng="l.latlng" :icon="icon">
          <v-popup :content="l.text"></v-popup>
        </v-marker>
      </v-marker-cluster>
    </v-map>
  </div>
</template>

<script>
import L from "leaflet";
import * as Vue2Leaflet from "vue2-leaflet";
import Vue2LeafletMarkercluster from "vue2-leaflet-markercluster";
import iconUrl from "leaflet/dist/images/marker-icon.png";
import shadowUrl from "leaflet/dist/images/marker-shadow.png";

function rand(n) {
  let max = n + 0.1;
  let min = n - 0.1;
  return Math.random() * (max - min) + min;
}

export default {
  name: "MarkerCluster",
  components: {
    "v-map": Vue2Leaflet.LMap,
    "v-tilelayer": Vue2Leaflet.LTileLayer,
    "v-icondefault": Vue2Leaflet.LIconDefault,
    "v-marker": Vue2Leaflet.LMarker,
    "v-popup": Vue2Leaflet.LPopup,
    "v-marker-cluster": Vue2LeafletMarkercluster
  },
  methods: {
    click: function(e) {
      alert("clusterclick");
    }
  },
  data() {
    let locations = [];
    for (let i = 0; i < 100; i++) {
      locations.push({
        id: i,
        latlng: L.latLng(rand(-34.9205), rand(-57.953646)),
        text: "Hola " + i
      });
    }
    let icon = L.icon(
      Object.assign({}, L.Icon.Default.prototype.options, {
        iconUrl,
        shadowUrl
      })
    );
    return {
      locations,
      icon,
      clusterOptions: {},
      initialLocation: L.latLng(-34.9205, -57.953646)
    };
  },
  mounted() {
    setTimeout(() => {
      console.log("done");
      this.$nextTick(() => {
        this.clusterOptions = { disableClusteringAtZoom: 11 };
      });
    }, 5000);
  }
};
</script>

<style>
@import "~leaflet/dist/leaflet.css";
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
html,
body {
  height: 100%;
  margin: 0;
}

.full-div {
  width: 900px;
  height: 500px;
  margin: auto;
}

.lmap {
  height: 100%;
  width: 100%;
}
</style>